<template>
  <div>
    <i-page-header class="product_tabs" title="商户登录账号"> </i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="formValidate" :model="formValidate">
        <Row type="flex" :gutter="24">
          <Col>
            <FormItem label="手机号码：" label-for="uid">
              <Input
                style="width: 140px"
                placeholder="用户手机号码"
                v-model="formValidate.mobile"
              />
            </FormItem>
          </Col>

          <Col>
            <FormItem label="姓名：" label-for="uid">
              <Input
                style="width: 140px"
                placeholder="请输入姓名"
                v-model="formValidate.real_name"
              />
            </FormItem>
          </Col>

          <Col>
            <FormItem label="商户名称：">
              <Input
                style="width: 140px"
                placeholder="商户名称"
                v-model="formValidate.name"
              />
            </FormItem>
          </Col>
          <Col>
            <FormItem label="营业执照：">
              <Input
                style="width: 140px"
                placeholder="营业执照"
                v-model="formValidate.business_code"
              />
            </FormItem>
          </Col>
          <Col>
            <FormItem label="　" label-for="uid">
              <Button
                type="primary"
                icon="ios-search"
                label="default"
                class="mr15"
                @click="getSearch"
                >搜索</Button
              >
            </FormItem>
          </Col>
        </Row>
      </Form>

      <Row type="flex">
        <Col v-bind="grid">
          <Button type="primary" @click="tapAdd" icon="md-add"
            >添加商户登录账号</Button
          >
        </Col>
      </Row>

      <Table
        :columns="columns1"
        :data="tableData"
        class="mt25"
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        :loading="loading"
        highlight-row
      >
        <template slot-scope="{ row }" slot="imgs">
          <img
            v-lazy="row.img"
            :src="row.img"
            v-image-preview
            style="max-height: 35px; cursor: pointer"
          />
        </template>

        <template slot-scope="{ row }" slot="status">
          <el-tag v-if="row.status == 1">开启</el-tag>
          <el-tag type="info" v-else>关闭</el-tag>
        </template>

        <template slot-scope="{ row }" slot="action">
          <a @click="edit(row)">编辑</a>
          <Divider type="vertical" />
          <a @click="tapDel(row)">删除</a>
        </template>

        <template slot-scope="{ row }" slot="user">
          <div class="fx-h fx-bc" style="color: #409eff; cursor: pointer">
            <div>{{ row.mobile }}</div>
          </div>
        </template>

        <template slot-scope="{ row }" slot="img">
          <el-avatar icon="el-icon-user-solid" :src="row.img"></el-avatar>
        </template>
      </Table>

      <div class="acea-row row-right page">
        <Page
          :total="page.count"
          show-elevator
          show-total
          @on-change="tapPage"
          :page-size="page.pageSize"
        />
      </div>
    </Card>

    <Modal
      v-model="dialogVisible"
      :title="title"
      @on-cancel="editClose"
      width="560px"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-row :space="24">
          <el-col :span="24">
            <el-form-item
              label="姓名"
              prop="name"
              :rules="[{ required: true, message: '请输入姓名' }]"
            >
              <div class="fx-r">
                <el-input
                  type="text"
                  placeholder="请输入姓名"
                  v-model="form.name"
                ></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :space="24">
          <el-col :span="24">
            <el-form-item
              label="手机号码"
              prop="mobile"
              :rules="[{ required: true, message: '请输入手机号码' }]"
            >
              <div class="fx-r" v-if="form.id > 0">
                <el-input
                  type="text"
                  placeholder="请输入手机号码"
                  v-model="form.mobile"
                  disabled
                ></el-input>
                <div style="color: red; font-size: 12px">
                  注：手机号码不可变更，如果要变更请删除账户，新建手机账户
                </div>
              </div>
              <div class="fx-r" v-else>
                <el-input
                  type="text"
                  placeholder="请输入手机号码"
                  v-model="form.mobile"
                ></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <Row type="flex" :gutter="24">
          <Col span="24">
            <el-form-item label="所属商户">
              <el-select
                filterable
                v-model="form.m_id"
                style="width: 350px"
                placeholder="所属商户"
              >
                <el-option label="无" :value="0" key="0"></el-option>
                <el-option
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                  v-for="item in merchantsAr"
                ></el-option>
              </el-select>
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24">
          <Col span="24">
            <el-form-item label="是否显示">
              <el-radio-group v-model="form.status">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </Col>
        </Row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subAdmin">确 定</el-button>
      </span>
    </Modal>

    <el-dialog title="选择用户" :visible.sync="dialogVisible2" width="40%">
      <div class="fx-r" style="margin-top: 10px">
        <Input
          type="text"
          style="width: 250px; margin-right: 10px"
          placeholder="请查询会员手机号码"
          v-model="tjData.mobile"
        />
        <el-button type="primary" @click="tapTjSeach">搜索</el-button>
      </div>

      <el-table :data="tjData.data" height="200px" v-loading="tjData.loading">
        <el-table-column label="序号" align="center" width="50">
          <template slot-scope="scope">
            {{ (tjData.page - 1) * tjData.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column prop="uid" label="uid" width="100"> </el-table-column>

        <el-table-column prop="nickname" label="昵称" width="150">
        </el-table-column>

        <el-table-column prop="mobile" label="手机号码" width="150">
        </el-table-column>

        <el-table-column prop="level_name" label="等级" width="100">
        </el-table-column>

        <el-table-column prop="reserve_count" label="可预数" width="80">
        </el-table-column>

        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <a
              @click="tapTjMember(scope.row)"
              v-if="tjData.i_uid != scope.row.uid"
              >选中</a
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <Page
          :total="tjData.pageCount"
          show-elevator
          show-total
          @on-change="tapTjPage"
          :page-size="tjData.pageSize"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import IPageHeader from '@/layouts/system/page-header/index'
import VueUeditorWrap from 'vue-ueditor-wrap'
// import { mapState, mapActions } from 'vuex'
import UiUpload from '@/ui/upload/index'
import Setting from '@/setting'
// import { SystemArea } from '../../../api/system/pub.js'
// import { SystemArea } from '@/api/system/pub.js'
import UiUploadMuch from '../../../ui/upload/more_index'
// import {
// SystemMember,
// SystemMemberMentorSave,
// SystemMemberVipDel,
// SystemMemberVipList,
// SystemMemberVipSave,
// } from '../../../api/system/member'
// } from '@/api/system/member'
import {
  SystemMerchantsAll,
  SystemMerchantsUserDel,
  SystemMerchantsUserList,
  SystemMerchantsUserSave,
} from '../../../api/system/merchants'
import UserInfo from '../member/userInfo.vue'
export default {
  name: 'merchants_index',
  components: { UserInfo, UiUploadMuch, VueUeditorWrap, UiUpload, IPageHeader },
  computed: {},
  data() {
    return {
      title: '详情操作',
      dialogVisible: false,
      dialogVisible2: false,
      upHeaders: {},
      upUrl: '',
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },

      formValidate: {},
      columns1: [
        {
          title: 'ID',
          key: 'id',
          width: 80,
        },
        {
          title: '姓名',
          key: 'user_name',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '店铺名称',
          key: 'name',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '营业执照',
          key: 'business_code',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '地址',
          key: 'address',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '账号信息',
          slot: 'user',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '部门信息',
          key: 'bumen_name',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '状态',
          key: 'status',
          slot: 'status',
          minWidth: 100,
          fixed: 'right',
        },
        {
          title: '操作',
          key: 'action',
          slot: 'action',
          fixed: 'right',
          minWidth: 120,
        },
      ],
      userInfoUi: [],
      loading: true,
      tableData: [],
      page: {
        count: 0, //一共多少数量
        pageSize: 0, //每一页码数量
        page: 1, //当前页码
      },

      tjData: {
        data: [],
        mobile: '',
        loading: false,
        pageCount: 0, // 一共多少数量
        pageSize: 0, // 每一页码数量
        page: 1, // 当前页码
      },

      form: {
        uid: 0,
        m_id: 0,
        status: 1,
      },
      merchantsAr: [],
    }
  },

  created() {
    this.initView()
    this.getMerchant()
  },
  methods: {
    initView: function () {
      this.getMemberData()
    },

    getMerchant: function () {
      SystemMerchantsAll().then((res) => {
        if (res.code == 200) {
          this.merchantsAr = res.data
        }
      })
    },

    /**
     * 新闻列表
     */
    getMemberData() {
      this.loading = true
      SystemMerchantsUserList({
        page: this.page.page,
        ...this.formValidate,
      })
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.loading = false

            this.page.pageSize = res.data.pageSize
            this.page.count = res.data.pageCount
            console.log(this.page)
          } else {
            this.loading = false
            this.$alert(res.msg)
          }
        })
        .catch((res) => {
          console.log(res)
          this.loading = false
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    // 编辑
    edit(row) {
      this.form = {
        uid: row.uid,
        mobile: row.mobile,
        name: row.user_name,
        m_id: row.m_id,
        status: row.status,
        id: row.id,
      }
      this.dialogVisible = true
    },
    /**
     * 关闭
     */
    editClose: function () {
      this.dialogVisible = false
    },
    /**
     * 修改数据
     */
    subAdmin: function () {
      if (this.form.m_id == 0) {
        this.$alert('请选择所属门店')
        return
      }

      let loading = this.$loading('提交数据中...')
      SystemMerchantsUserSave(this.form)
        .then((res) => {
          loading.close()
          if (res.code == 200) {
            this.dialogVisible = false
            this.$Message.success('操作成功')
            this.getMemberData()
          } else {
            this.$alert(res.msg, '系统提示')
          }
        })
        .catch((err) => {
          loading.close()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    /**
     * 分页
     */
    tapPage: function (index) {
      this.page.page = index
      this.getMemberData()
    },

    getSearch: function () {
      this.page.page = 1
      this.getMemberData()
    },
    /**
     * 打开会员详情页面
     * @param uid
     */
    openEl: function (uid) {
      this.userInfoUi.push({ dialogVisible: true, uid: uid })
      var index = this.userInfoUi.length - 1
      setTimeout(() => {
        let gv = 'userInfoUi' + index
        this.$refs[gv][0].initView(uid)
      }, 300)
    },
    tapUserItem: function (uid) {
      this.openEl(uid)
    },
    /**
     * 成为VIP
     */
    tapAdd: function () {
      this.form = {
        uid: 0,
        m_id: 0,
        status: 1,
      }
      this.dialogVisible = true
    },

    tapSelectUser: function () {
      this.tjData = {
        data: [],
        mobile: '',
        loading: false,
        pageCount: 0,
        pageSize: 0,
        page: 1,
      }
      this.dialogVisible2 = true
      this.getiMember()
    },

    /**
     * 推荐
     */
    getiMember: function () {
      this.tjData.loading = true
      var data = {
        page: this.tjData.page,
        mobile: this.tjData.mobile,
      }
      SystemMember(data)
        .then((res) => {
          if (res.code == 200) {
            this.tjData.data = res.data.list
            this.tjData.loading = false
            this.tjData.pageSize = res.data.pageSize
            this.tjData.pageCount = res.data.pageCount
          } else {
            this.tjData.loading = false
            this.$alert(res.msg)
          }
        })
        .catch((res) => {
          this.tjData.loading = false
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },

    tapTjSeach: function () {
      this.tjData.page.page = 1
      this.getiMember()
    },

    tapTjPage: function (page) {
      this.tjData.page.page = page
      this.getiMember()
    },

    tapTjMember: function (item) {
      this.form.uid = item.uid
      this.form.mobile = item.mobile
      this.form.nickname = item.nickname
      this.dialogVisible2 = false
    },

    tapDel: function (row) {
      this.$utils
        .confirm(this, {
          title: '确定要移除本商户员工账号？',
          success: () => {
            return SystemMerchantsUserDel({ id: row.id })
          },
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({ message: res.msg, type: 'success' })
            this.getMemberData()
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
  },
}
</script>
<style scoped>
.platform-img {
  width: 20px;
  height: 20px;
  background: #f2f2f2;
  margin-right: 4px;
}
.platform-img img {
  width: 100%;
}
</style>
